<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <mylogin></mylogin>
        <mylogin2></mylogin2>
        <mylogin3></mylogin3>
        <mylogin4></mylogin4>
        <mylogin5></mylogin5>
    </div>
</body>
<template id="login1">
    <h1>我是直接应用template标签的方法</h1>
</template>
<script id="demo1" type="x-template">
    <h1>我是第三种写在script标签内的</h1>
</script>
<script src="./vue-2.4.0.js"></script>
<script>

    // 第一种方式let的声明组件和注册
    let login=Vue.extend({
        template:"<h2>我是第一种声明方式</h2>"
    })
    Vue.component("mylogin",login)
    // component("#login1",{})

Vue.component("mylogin2",{
    template:"<h2>我是第二种声明方式</h2>"
})

Vue.component("mylogin3",{
    template:"#demo1"
})


Vue.component("mylogin4",{
    template:"#login1"
})

    

    let vm=new Vue({
        el:"#app",
        components:{
            "mylogin5":{
                template:"<h2>我是局部</h2>"
            }
        }
    })
    
</script>
</html>